<template>
  <div class="arrymdiv">
    <div class="descriptions">
      <el-descriptions title="添加课件" direction="vertical" :column="3" :size="3" border>
        <el-descriptions-item label="课件名称"><el-input v-model="kcname" placeholder="名称" /></el-descriptions-item>

        <el-descriptions-item label="备注">
          <el-input v-model="kcname" placeholder="备注" />
        </el-descriptions-item>
        <el-descriptions-item label="课件类型"><el-switch v-model="kjtype" class="mb-2" style="--el-switch-on-color: #13ce66" active-text="视频" inactive-text="文本" /></el-descriptions-item>
        <el-descriptions-item label="课件编辑" span="4">
          <div v-if="kjtype == false" style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 500px; width:700px overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
          </div>
          <el-upload
            v-if="kjtype == true"
            ref="upload"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">上传视频</el-button>
            </template>
          </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="操作"><el-button @click="hookhtml()" type="primary">添加</el-button></el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { defineComponent, shallowRef, onMounted, onBeforeUnmount, ref } from 'vue';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
import { reactive, toRefs } from '@vue/reactivity';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default defineComponent({
  components: { Editor, Toolbar },
  setup() {
    const data = reactive({
      kcname: '',
      ispublic: '',
      kjtype: false,
      valueHtml: '',
      editorConfig: { placeholder: '请输入内容...' },
    });
    const editorRef = shallowRef();
    onMounted(() => {
      setTimeout(() => {
        data.valueHtml = '';
      }, 1500);
    });
    const upload = ref<UploadInstance>();
    const handleExceed: UploadProps['onExceed'] = (files) => {
      upload.value!.clearFiles();
      const file = files[0] as UploadRawFile;
      file.uid = genFileId();
      upload.value!.handleStart(file);
    };
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    const handleCreated = (editor: any) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    const hookhtml = () => {
      console.log(data.valueHtml);
    };
    const toolbarConfig = {};
    return {
      ...toRefs(data),
      editorRef,
      mode: 'default',
      toolbarConfig,
      handleCreated,
      hookhtml,
      handleExceed,
    };
  },
});
</script>
<style scoped>
.arrymdiv {
  border-radius: 10px;
  margin: 1px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 5px #cfcfcf;
}
.descriptions {
  padding: 20px;
}
</style>
